<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .menu {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="menu">
        <!-- 菜单  el-menu
        default-active:默认选中哪一项（对应下面el-menu-item的index的值）
        el-menu-item：菜单的每一项
        index:当前项的值与default-active对应
            i:写图标
            slot="title":重写哪部分：标题
        -->
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据概览</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-user"></i>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">题库列表</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-office-building"></i>
            <span slot="title">企业列表</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">学科列表</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <script src="./vue.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
